<template>
  <div class="asdfas">
    <div class="star-sky">
      <div
        class="star"
        v-for="star in starCount"
        :key="star"
        :style="{ top: randomTop(star), left: randomLeft(star) }"
      ></div>
    </div>
    <div id="jsi-cherry-container" class="wrapper">
      <p class="asdfads">{{ typeText }}</p>
      <canvas id="pinkBoard" class="wrapper"></canvas>
    </div>
  </div>
</template>
 
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
export default {
  data() {
    return {
      text: `${this.$route.query.name},我们之间的爱情,永远画不上句号,感谢高小姐来到我的世界,愿吾心欢喜`,
      typeText: "",
      index: 0,
      typingSpeed: 200, // 打字速度，单位毫秒
      pauseSpeed: 1000, // 暂停速度，单位毫秒
      //
      starCount: 100, // 星星数量
      settings: {
        particles: {
          length: 500,
          duration: 2,
          velocity: 100,
          effect: -0.75,
          size: 30,
        },
      },
    };
  },
  created() {
    // setInterval(() => {
    this.type();
    // }, 5000);
  },
  mounted() {
    console.log(this.$route.query.name);

    // let canvas = document.getElementById("pinkBoard");
    // this.drawCanvas(canvas);
    // this.renderCanvasSize();
  },
  methods: {
    type() {
      if (this.index < this.text.length) {
        // 打字
        this.typeText += this.text[this.index++];
        setTimeout(this.type, this.typingSpeed);
      } else {
        // 暂停
        setTimeout(() => {
          // 继续打字或结束
          if (this.index > this.text.length) {
            // 清除定时器
            clearTimeout();
          } else {
            this.typeText = this.text.substring(0, this.index - 1);
            setTimeout(this.type, this.pauseSpeed);
          }
        }, this.pauseSpeed);
      }
    },
    randomTop(star) {
      return `${Math.random() * 100}%`;
    },
    randomLeft(star) {
      return `${Math.random() * 100}%`;
    },
    /*
     * Point Class
     */
    PointInit() {
      function Point(x, y) {
        this.x = typeof x !== "undefined" ? x : 0;
        this.y = typeof y !== "undefined" ? y : 0;
      }
      // 克隆point
      Point.prototype.clone = function () {
        return new Point(this.x, this.y);
      };
      // 计算点到原点距离
      Point.prototype.length = function (length) {
        // 未传入length，计算点到原点的距离
        if (typeof length == "undefined")
          return Math.sqrt(this.x * this.x + this.y * this.y);
        // 传入了length，获取该点等比例缩放至对应距离
        this.normalize();
        this.x *= length;
        this.y *= length;
        return this;
      };
      Point.prototype.normalize = function () {
        // 将点移动至距离原点为1的点
        let length = this.length();
        this.x /= length;
        this.y /= length;
        return this;
      };
      return Point;
    },
    /*
     * Particle class
     */
    ParticleInit() {
      let Point = this.PointInit();
      let that = this;
      function Particle() {
        /**
         * position: {x:0,y:0},
         * velocity: {x:0,y:0},
         * acceleration: {x:0,y:0},
         * age:0
         * @type {Point}
         */
        this.position = new Point();
        this.velocity = new Point();
        this.acceleration = new Point();
        this.age = 0;
      }
      Particle.prototype.initialize = function (x, y, dx, dy) {
        this.position.x = x;
        this.position.y = y;
        this.velocity.x = dx;
        this.velocity.y = dy;
        this.acceleration.x = dx * that.settings.particles.effect;
        this.acceleration.y = dy * that.settings.particles.effect;
        this.age = 0;
      };
      Particle.prototype.update = function (deltaTime) {
        // 根据时间增量变化位置及速度
        this.position.x += this.velocity.x * deltaTime;
        this.position.y += this.velocity.y * deltaTime;
        this.velocity.x += this.acceleration.x * deltaTime;
        this.velocity.y += this.acceleration.y * deltaTime;
        this.age += deltaTime;
      };
      Particle.prototype.draw = function (context, image) {
        function ease(t) {
          return --t * t * t + 1;
        }
        let size =
          image.width * ease(this.age / that.settings.particles.duration);
        context.globalAlpha = 1 - this.age / that.settings.particles.duration;
        context.drawImage(
          image,
          this.position.x - size / 2,
          this.position.y - size / 2,
          size,
          size
        );
      };
      return Particle;
    },

    /*
    ParticlePool class  微粒池
     */
    ParticlePoolInit() {
      let particles,
        firstActive = 0,
        firstFree = 0,
        duration = this.settings.particles.duration;
      let Particle = this.ParticleInit();
      function ParticlePool(length) {
        particles = new Array(length);
        for (let i = 0; i < particles.length; i++) {
          particles[i] = new Particle();
        }
      }
      ParticlePool.prototype.add = function (x, y, dx, dy) {
        particles[firstFree].initialize(x, y, dx, dy);
        firstFree++;
        if (firstFree === particles.length) firstFree = 0;
        if (firstActive === firstFree) firstActive++;
        if (firstActive === particles.length) firstActive = 0;
      };
      let index;
      ParticlePool.prototype.update = function (deltaTime) {
        if (firstActive < firstFree) {
          for (index = firstActive; index < firstFree; index++)
            particles[index].update(deltaTime);
        }
        if (firstFree < firstActive) {
          for (index = firstActive; index < particles.length; index++)
            particles[index].update(deltaTime);
          for (index = 0; index < firstFree; index++)
            particles[index].update(deltaTime);
        }

        while (
          particles[firstActive].age >= duration &&
          firstActive !== firstFree
        ) {
          firstActive++;
          if (firstActive === particles.length) firstActive = 0;
        }
      };

      ParticlePool.prototype.draw = function (context, image) {
        if (firstActive < firstFree) {
          for (index = firstActive; index < firstFree; index++)
            particles[index].draw(context, image);
        }
        if (firstFree < firstActive) {
          for (index = firstActive; index < particles.length; index++)
            particles[index].draw(context, image);
          for (index = 0; index < firstFree; index++)
            particles[index].draw(context, image);
        }
      };
      return ParticlePool;
    },

    drawCanvas(canvas) {
      let context = canvas.getContext("2d");
      let ParticlePool = this.ParticlePoolInit();
      let particles = new ParticlePool(this.settings.particles.length);
      let particleRate =
        this.settings.particles.length / this.settings.particles.duration;
      let time;
      let Point = this.PointInit();
      let that = this;

      function pointOnHeart(t) {
        return new Point(
          160 * Math.pow(Math.sin(t), 3),
          130 * Math.cos(t) -
            50 * Math.cos(2 * t) -
            20 * Math.cos(3 * t) -
            10 * Math.cos(4 * t) +
            25
        );
      }

      let image = (function () {
        let canvas = document.createElement("canvas"),
          context = canvas.getContext("2d");
        canvas.width = that.settings.particles.size;
        canvas.height = that.settings.particles.size;

        function to(t) {
          let point = pointOnHeart(t);
          point.x =
            that.settings.particles.size / 2 +
            (point.x * that.settings.particles.size) / 350;
          point.y =
            that.settings.particles.size / 2 -
            (point.y * that.settings.particles.size) / 350;
          return point;
        }
        context.beginPath();
        let t = -Math.PI;
        let point = to(t);
        context.moveTo(point.x, point.y);
        while (t < Math.PI) {
          t += 0.01;
          point = to(t);
          context.lineTo(point.x, point.y);
        }
        context.closePath();

        context.fillStyle = "#ea80b0";
        context.fill();

        let image = new Image();

        image.src = canvas.toDataURL();
        return image;
      })();

      function render() {
        requestAnimationFrame(render);

        let newTime = new Date().getTime() / 1000,
          deltaTime = newTime - (time || newTime);
        time = newTime;

        context.clearRect(0, 0, canvas.width, canvas.height);

        let amount = particleRate * deltaTime;

        for (let i = 0; i < amount; i++) {
          let pos = pointOnHeart(Math.PI - 2 * Math.PI * Math.random());
          let dir = pos.clone().length(that.settings.particles.velocity);
          particles.add(
            canvas.width / 2 + pos.x,
            canvas.height / 2 - pos.y,
            dir.x,
            -dir.y
          );
        }

        particles.update(deltaTime);

        particles.draw(context, image);
      }

      function onResize() {
        canvas.width = canvas.clientWidth;
        canvas.height = canvas.clientHeight;
      }

      window.onresize = onResize;

      setTimeout(function () {
        onResize();
        render();
      }, 10);
    },

    renderCanvasSize() {
      let canvas = document.getElementById("pinkBoard");
      let wrapper = document.getElementById("jsi-cherry-container");
      canvas.width = wrapper.clientWidth;
      canvas.height = wrapper.clientHeight;
    },
  },
};
</script>
<style lang="less" scoped>
.star-sky {
  position: relative;
  width: 100%;
  height: 100vh;
  background: #000;
  overflow: hidden;
}

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 2px white, 0 0 4px white, 0 0 8px white, 0 0 16px white,
    0 0 32px white, 0 0 64px white, 0 0 128px white, 0 0 256px white;
  animation: twinkle 5s infinite alternate ease-in-out;
}

@keyframes twinkle {
  from {
    opacity: 0.5;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.asdfas {
  position: relative;
  #jsi-cherry-container {
    width: 100%;
    margin: auto;
    height: 100vh;
    overflow: hidden;
    zoom: 0.8;
    //background-color: #000000;
    position: absolute;
    top: 0;
    animation: beat 0.8s infinite;
    // display: flex;
    // justify-content: center;
    // align-items: center;
    .asdfads {
      width: 60%;
      margin: auto;
      text-align: center;
      font-family: YouSheBiaoTiHei;
      font-weight: 400;
      font-size: 26px;
      color: #eff8fc;
      text-shadow: 0px 4px 1px rgba(19, 80, 143, 0.66);
      position: absolute;
      top: 40%;
      // z-index: 100;
      left: 20%;
    }
  }

  /* 定义CSS动画 */
  @keyframes beat {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
  }
}
</style>